<template>
  <div class="piece" @click="clickPiece" :class="{
      active: active,
      bgBlack: value == 'x',
      bgWhite: value == 'o',
      borderBlack: !active && isBorderBlack,
      disabled:disabled
    }">
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { defineProps, ref, computed, provide } from "vue";
import { defineEmits } from "vue";
//  使用defineEmits创建名称，接受一个数组
let $myemit = defineEmits(["success"]);
let key = ref("");
const props = defineProps({
  value: {
    type: String,
    default: "",
  },
  position: {
    type: Object,
    default: () => {},
  },
  win: {
    type: String,
    default: "",
  },
  active: {
    type: Boolean,
    default: true,
  },
  isNullCity: {
    type: Number,
    default: 0,
  },
  disabled: {
    type: Boolean,
    default: true,
  },
});
let isBorderBlack = computed(() => {
  let { x, y } = props.position;
  return (
    (x == 10 && y == 10) ||
    (x == 3 && y == 3) ||
    (x == 17 && y == 3) ||
    (x == 3 && y == 17) ||
    (x == 17 && y == 17)
  );
});
let clickPiece = () => {
  if (props.disabled) {
    return;
  }
  console.log(props.isNullCity);
  if (props.win) {
    ElMessage({
      message: `本场胜利者是${props.win}`,
      showClose: true,
    });
    return;
  }
  key.value = JSON.parse(sessionStorage.getItem("user"));
  if (key.value == "look") {
    return;
  }
  let prev = JSON.parse(sessionStorage.getItem("Prev"));

  if (prev == key.value) {
    ElMessage({
      message: `请等待${key.value == "o" ? "x" : "o"}落子`,
      type: "warning",
      showClose: true,
    });
    return;
  }

  if (props.value && !props.isNullCity) {
    return;
  }

  $myemit("success", key.value, props.position);
};
</script>

<style lang="scss" scoped>
.piece {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d4d7de;
}
.disabled {
  opacity: 0.5;
  background-color: #333;
}
.bgWhite {
  background: url("~@/assets/white.png") no-repeat;
  background-size: 40px 40px;
}
.bgBlack {
  background: url("~@/assets/black.png") no-repeat;
  background-size: 40px 40px;
}
.active {
  animation: scaleRandom 1s ease-in-out infinite;
}
.borderBlack {
  border-color: #fff;
}
@keyframes scaleRandom {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
</style>